<!--
* @Author: zhangjing
* @Date: 2025-04-24 10:24:25
* @Description: 内容框样式=>
-->
<template>
	<div class="cardbox pannel">
		<div class="conbox-con flex flex-v">
			<div class="conbox-hd flex" v-if="hasHeader">
				<div class="left-dot"><div class="dot"></div></div>
				<div class="flex flex-align-center" style="width: 100%">
					<slot name="header"></slot>
				</div>
				<div class="right-dot"><div class="dot"></div></div>
			</div>
			<div class="conbox-bd flex-1">
				<div class="conbox-bd-inner flex flex-v">
					<slot></slot>
				</div>
			</div>
			<div class="conbox-ft" v-if="hasFooter">
				<slot name="footer"></slot>
			</div>
			<a href="javascript:;" class="closeWin" @click="reback"><img src="closeWin.png" alt="" /></a>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {};
	},
	props: {
		hasHeader: {
			type: Boolean,
			default: false,
		},
		hasFooter: {
			type: Boolean,
			default: false,
		},
	},
	methods: {
		reback() {
			this.$emit('reback');
		},
	},
};
</script>

<style scoped lang="less">
.cardbox {
	overflow: visible;
	height: calc(100vh - 120px);
	position: relative;
	width: 1162px;
	max-width: 80vw;
	margin: 15px auto 0;
	max-height: 80vh;
}
.cardbox .closeWin {
	position: absolute;
	right: -20px;
	bottom: -16px;
	width: 46px;
	height: 46px;
	img {
		display: block;
		width: 100%;
		height: 100%;
	}
}

.conbox-con {
	height: 100%;
	border-radius: 8px;
	width: 100%;
}
.conbox-hd {
	font-size: 22px;
	color: #2e2424;
	text-align: center;
	margin-top: 29px;
	position: relative;
	width: 100%;
}
.conbox-hd {
	height: 62px;
	background-color: @primary-color;
	border-radius: 10px 10px 0 0;
	border: 2px solid #2e2424;
	position: relative;
	.left-dot,
	.right-dot {
		width: 56px;
		height: 60px;
		line-height: 60px;
		text-align: center;
	}
	.left-dot {
		position: absolute;
		top: 0;
		left: 0;
	}
	.right-dot {
		position: absolute;
		top: 0;
		right: 0;
	}
	.dot {
		width: 14px;
		height: 14px;
		border-radius: 100%;
		background-color: #ffe95d;
		border: 2px solid #2e2424;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
}

.conbox-bd {
	width: 100%;
	height: calc(100% - 140px);
	margin: 27px auto 0;
	background: rgb(243, 248, 255);
	border: 2px solid @primary-color;
	border-radius: 10px;
	overflow: hidden;
	position: relative;
	.conbox-bd-inner {
		margin: 15px;
		background: rgb(255, 255, 255);
		border: 2px dashed @primary-color;
		border-radius: 10px;
		height: calc(100% - 30px);
		font-size: 18px;
		color: #2e2424;
		overflow: auto;
	}
}
.conbox-hd + .conbox-bd {
	margin-top: 0;
	border-radius: 0 0 10px 10px;
	border-top-color: transparent;
}
.conbox-ft {
	margin-top: 10px;
}
.cardbox .conbox-ft + .closeWin {
	bottom: 56px;
}
/* 右侧tab */
.right-tabs {
	position: absolute;
	left: calc(100% - 148px);
	bottom: 135px;
	background: @primary-color;
	width: 123px;
	padding: 2px 6px 2px 2px;
	color: #4d5053;
	font-size: 22px;
	font-weight: bold;
	.tab {
		background: #fff;
		text-align: center;
		cursor: pointer;
		&.blue {
			background: none;
			color: #fff;
		}
	}
}
</style>
